<template>
  <div id="BoothUpdate">
    <el-row>
      <el-col :span="4" class="div_border_title">
        <h2>摊位信息管理</h2>
      </el-col>
    </el-row>
    <div class="search-box">
      <SearchMenu :authority="64" @returnData="doSearch">
      </SearchMenu>
    </div>
    <div class="toolbar-box">
      <el-button-group>
        <el-button v-for="(toolbar,index) in toolbarList" :key="index" :type="toolbar.type" :icon="toolbar.icon"
                   @click="getButtonType(toolbar.event)">{{toolbar.name}}
        </el-button>
      </el-button-group>
    </div>
    <el-table :data="boothList" border highlight-current-row fit @row-click="clickRow"
              @current-change="handleTableChange" @row-dblclick="openDialog">
      <el-table-column type="index" :label="$t('index')" width="100" align="center"></el-table-column>
      <el-table-column prop="stalls_name" label="摊位名称" width="150" align="center"></el-table-column>
      <el-table-column prop="stalls_number" label="摊位编号" align="center"></el-table-column>
      <el-table-column prop="stalls_url" label="摊位地址" width="200" align="center"></el-table-column>
      <el-table-column prop="status" :formatter="formatterStatus" label="状态" width="100"
                       align="center"></el-table-column>
      <el-table-column prop="memo" label="备注" width="200" align="center"></el-table-column>
    </el-table>
    <el-pagination v-if="total > 5" @current-change="handleCurrentChange" layout="total, prev, pager, next"
                   :total="total" styele="table-page-style"></el-pagination>

    <el-dialog title="修改摊位信息" v-model="editDialog" size="tiny">
      <el-form :model="currData" :rules="datarules" ref="currData" label-width="80px">
        <el-form-item label="摊位名称" prop="stalls_name">
          <el-input v-model="currData.stalls_name"></el-input>
        </el-form-item>
        <el-form-item label="摊位地址" prop="stalls_url">
          <el-input v-model="currData.stalls_url"></el-input>
        </el-form-item>
        <el-form-item label="备注(0-120字)" prop="memo">
          <el-input type="textarea" v-model="currData.memo"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group size="small" style="width: 100%;" v-model="currData.status">
            <el-radio :label="0">可预约</el-radio>
            <el-radio :label="1">不可用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="postInfo">确 定</el-button>
        <el-button @click="editDialog = false">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
  import { commonNotify } from '../../assets/js/common.js'
  import { getStaticMapList } from '../../assets/js/GlobeDefine.js'
  import PositionManagementDialog from '@/components/positionManagement/PositionManagementDialog'
  import { postDataToServer } from '../../assets/js/post.js'
  import { getToolBarList } from '../../assets/js/buildStructure/list.js'
  import SearchMenu from '../common/SearchMenu'

  export default {
    name: 'positionManagement',
    data () {
      return {
        boothList: [],
        toolbarList: [],
        currentID: '',
        currData: {
          memo: '',
          stalls_name: '',
          stalls_number: '',
          stalls_url: '',
          status: 0
        }, //点击时记录该行的数据
        page_no: 1,
        total: 0,
        editDialog: false,
        type: '',
        authority: 6,
        datarules: {
          stalls_name: [
            {required: true, message: '请输入摊位名称', trigger: 'blur'}
          ],
          stalls_url: [
            {required: true, message: '请输入摊位地址', trigger: 'blur'}
          ],
          memo: [
            {min: 0, max: 120, message: '长度在 0 到 120 个字符', trigger: 'blur'}
          ]
        },
      }
    },
    created () {
      this.getToolBars()
      this.getBoothDataList({'page_no': 1})
    },
    methods: {
      clickRow (row, event, column) {
        this.currentID = row.id
        this.currData = row
      },
      handleTableChange (currentRow, oldCurrentRow) {
        this.currData = currentRow
      },
      handleCurrentChange (pageNum) {
        this.page_no = pageNum
      },
      //双击打开dialog
      openDialog (row, event) {
        this.currData = row
        this.currentID = row.id
        this.editDialog = true
      },
      getBoothDataList () {
        let _this = this
        var parameter = new Object()
        parameter.page_no = 1
        parameter.page_size = 20
        postDataToServer('STALLS_NET_LISTPAGE', parameter).then((data) => {
          if (data.status === 0) {
            _this.boothList = data.data_list
            _this.total = data.total_results
          } else {
            this.$message({
              type: 'error',
              message: data.message
            })
          }
        })
      },
      doSearch (parameter) {
        let _this = this
        parameter.page_no = 1
        parameter.page_size = 20
        parameter.stalls_name = parameter.key_names
        postDataToServer('STALLS_NET_LIKE_LISTPAGE', parameter).then((data) => {
          if (data.status === 0) {
            _this.boothList = data.data_list
            _this.total = data.total_results
          } else {
            this.$message({
              type: 'error',
              message: data.message
            })
          }
        })
      },
      //取得功能按钮
      getToolBars () {
        this.toolbarList = getToolBarList('list', this.authority)
      },
      //根据不同的按钮执行不同的操作
      getButtonType (type) {
        let _this = this
        switch (type) {
          case 'edit':
            _this.edit()
            break
          case 'delete':
            _this.delete()
          default:
            break
        }
      },
      //编辑按钮
      edit () {
        if (this.currentID === '' || this.currentID === undefined) {
          this.$message({
            message: '请选中一行',
            type: 'warning'
          })
        } else {
          this.editDialog = true
        }
      },
      saveEdit () {
        let _this = this
        let params = new Object()
        params.stalls_name = _this.currData.stalls_name
        params.stalls_url = _this.currData.stalls_url
        params.memo = _this.currData.memo
        params.status = _this.currData.status
        params.id = _this.currentID
        postDataToServer('STALLS_NET_EDIT', params).then((data) => {
          if (data.status === 0) {
            this.$message({
              message: '修改成功',
              type: 'success'
            })
            _this.editDialog = false
          } else {
            this.$message({
              message: data.message,
              type: 'error'
            })
            _this.getBoothDataList()
          }
        })
      },
      postInfo () {
        this.$refs['currData'].validate((valid) => {
          if (valid) {
            this.saveEdit()
          } else {
            this.$message('数据格式有误！')
            return false
          }
        })
      },
      //删除按钮
      delete () {
        let _this = this
        if (_this.currentID !== '') {
          _this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            let param = new Object()
            param.id = _this.currentID
            postDataToServer('STALLS_NET_DEL', param).then((data) => {
              if (data.status === 0) {
                _this.$message({
                  type: 'success',
                  message: '删除成功'
                })
                _this.getBoothDataList({'page_no': 1})
              } else {
                this.$message({
                  type: 'error',
                  message: data.message
                })
              }
            })
          }).catch(() => {
            _this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
        } else {
          this.$message({
            message: '请选中一行',
            type: 'warning'
          })
        }
      },
      formatterStatus (row) {
        return getStaticMapList('stall_status', row.status)
      }
    },
    components: {
      SearchMenu,
      PositionManagementDialog
    },
    watch: {
      page_no (val, oldVal) {
        this.getBoothDataList({'page_no': val})
      }
    }
  }
</script>

<style scoped>
  #BoothUpdate {
    padding: 2em;
  }

  .toolbar-box {
    border: 1px solid #20A0FF;
    background-color: #20A0FF;
    margin-top: 20px;
  }

  .dialog-footer {
    text-align: center;
  }
</style>
